<!--
 * @Description: 开票表单
 * @Author: py
 * @Date: 2024-12-23
-->
<script setup lang="ts" name="invoice-form">
import type { VxeGridProps } from 'vxe-table'

import { orderDetailsApi } from '@fl/api/city-service'

const { query } = useRoute()
const { id } = query
const skuImgPath = 'https://public-obs-cdn.anjulian.com.cn/2024-04-26/73167aed-92d2-4df9-b7dc-b3c418998d91.jpg'

// 发票信息表格
const invoiceGridOptions = reactive<VxeGridProps>({
    border: 'inner',
    columns: [
        { field: 'skuName', title: '发票类型', width: 150 },
        { field: 'orderLineId', minWidth: 120, title: '电量(度)' },
        { field: 'spuId', minWidth: 180, title: '订单信息(元)' },
        { field: 'orderLineStatus', minWidth: 180, title: '发票抬头' },
        { field: 'orderQuantity', minWidth: 180, title: '税号' },
        { field: 'orderDiscountAmount', minWidth: 180, title: '公司地址' },
        { field: 'orderPaidAmount', title: '公司电话', width: 120 },
        { field: 'orderAmount', minWidth: 180, title: '开户银行' },
        { field: 'skuId', minWidth: 180, title: '银行账号' },
    ],
    data: [],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    loading: false,
    maxHeight: 360,
    minHeight: 60,
    size: 'medium',
})

// 订单信息表格
const orderGridOptions = reactive<VxeGridProps>({
    border: 'inner',
    columns: [
        { title: 'ID', type: 'seq', width: 60 },
        { field: 'skuName', title: '用户姓名', width: 130 },
        { field: 'orderLineId', title: '手机号', width: 105 },
        { field: 'spuId', minWidth: 180, title: '充电站名称' },
        { field: 'orderLineStatus', minWidth: 180, title: '合作商名称' },
        { field: 'orderPaidAmount', title: '账单生成时间', width: 140 },
        { field: 'orderQuantity', minWidth: 120, title: '订单总额' },
        { field: 'orderDiscountAmount', minWidth: 120, title: '充电电费' },
        { field: 'orderAmount', minWidth: 120, title: '充电服务费' },
        { field: 'skuId', minWidth: 120, title: '优惠券金额' },
        { field: 'skuImgPath', minWidth: 120, title: '订单实收总计' },
    ],
    data: [],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    loading: false,
    maxHeight: 360,
    minHeight: 60,
    size: 'medium',
})

// 收件人信息表格
const recipientGridOptions = reactive<VxeGridProps>({
    border: 'inner',
    columns: [
        { field: 'skuName', minWidth: 130, title: '收件人' },
        { field: 'orderLineId', minWidth: 105, title: '手机号' },
        { field: 'spuId', minWidth: 180, title: '收件人地址' },
        { field: 'orderPaidAmount', minWidth: 180, title: '电子邮箱' },
    ],
    data: [],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    loading: false,
    maxHeight: 360,
    minHeight: 60,
    size: 'medium',
})

// 寄件信息表格
const sendGridOptions = reactive<VxeGridProps>({
    border: 'inner',
    columns: [
        { field: 'skuName', minWidth: 130, title: '寄出方式' },
        { field: 'skuImgPath', minWidth: 300, title: '开票链接' },
        { minWidth: 180, slots: { default: 'invoicePics' }, title: '开票图示' },
    ],
    data: [],
    // headerCellClassName: 'table-header-cell',
    // headerRowClassName: 'bg-white',
    loading: false,
    maxHeight: 360,
    minHeight: 60,
    size: 'medium',
})

const isFormLoading = ref(false)
// 获取表单详情信息-回显
function getFormDetails() {
    isFormLoading.value = true
    orderDetailsApi({
        orderId: id,
    }).then((data) => {
        invoiceGridOptions.data = data.skuOrderList
        orderGridOptions.data = data.skuOrderList
        recipientGridOptions.data = data.skuOrderList
        sendGridOptions.data = data.skuOrderList
    }).finally(() => {
        isFormLoading.value = false
    })
}

getFormDetails()
</script>

<template>
    <el-skeleton v-if="isFormLoading"
                 :rows="8"
    />

    <el-card v-else
             shadow="never"
             class="border-none"
    >
        <el-button class="mb-20"
                   @click="$router.back"
        >
            返回列表
        </el-button>

        <div class="px-30">
            <h2 class="module-title">
                发票信息
            </h2>

            <vxe-grid v-bind="invoiceGridOptions"
                      m-b20
            />

            <h2 class="module-title">
                订单信息
            </h2>

            <vxe-grid v-bind="orderGridOptions"
                      m-b20
            />

            <h2 class="module-title">
                收件人信息
            </h2>

            <el-row m-b20>
                <el-col :span="16">
                    <vxe-grid v-bind="recipientGridOptions" />
                </el-col>
            </el-row>

            <h2 class="module-title">
                寄出信息
            </h2>

            <el-row m-b20>
                <el-col :span="16">
                    <vxe-grid v-bind="sendGridOptions">
                        <template #invoicePics>
                            <!-- <el-image v-if="row.skuImgPath"
                                    class="w-50"
                                    :src="row?.skuImgPath"
                                    :preview-src-list="[row?.skuImgPath]"
                                    preview-teleported
                                    fit="contain"
                            /> -->
                            <el-image class="w-50"
                                      :src="skuImgPath"
                                      :preview-src-list="[skuImgPath]"
                                      preview-teleported
                                      fit="contain"
                            />
                        </template>
                    </vxe-grid>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<style lang="less" scoped>
@import '../custom.less';
</style>
